<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>门店管理</el-breadcrumb-item>
      <el-breadcrumb-item>门店列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索和添加 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="grid-content bg-purple">
            <el-input placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-button type="success" @click="addShop">添加门店</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 添加门店弹框 -->
      <add-shop ref="addShopRef"></add-shop>
      <!-- 表格区域 -->
      <el-table :data="tableData" border stripe fit style="width:100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="联系人">
                <span>{{ props.row.contact }}</span>
              </el-form-item>
              <el-form-item label="联系电话">
                <span>{{ props.row.contactInfo }}</span>
              </el-form-item>
              <el-form-item
                :label="item.name"
                v-for="item in props.row.channel"
                :key="item.id"
              >
                <span>{{ item.beerType }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- <el-table-column label="#" type="index"></el-table-column> -->
        <el-table-column prop="shop" label="门店名称"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="createdBy" label="创建人"> </el-table-column>
        <el-table-column prop="created" label="创建时间"> </el-table-column>
        <el-table-column prop="todaySales" label="今日销量(升)">
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button size="mini" @click="toShopDetail"
              >管理</el-button>
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import AddShop from 'views/shop/AddShop'

export default {
  name: 'ShopList',
  components: {
    AddShop
  },
  data () {
    return {
      tableData: [
        {
          shop: '龙湖天街店',
          createdBy: 'admin',
          address: '成都市北一环龙湖天街4F',
          created: '2020-10-12 15:21:12',
          todaySales: 30,
          contact: '张小仙',
          contactInfo: '13888888888',
          channel: [
            { id: 1, name: '通道一', beerType: '白啤' },
            { id: 2, name: '通道二', beerType: '德国HB黑啤' },
            { id: 3, name: '通道三', beerType: '原浆' },
            { id: 4, name: '通道四', beerType: '草莓小麦' },
            { id: 5, name: '通道五', beerType: '哈密瓜小麦' },
            { id: 6, name: '通道六', beerType: '世涛' }
          ]
        }
      ]
    }
  },
  methods: {
    addShop () {
      this.$refs.addShopRef.dialogVisible = true
    },
    toShopDetail () {
      this.$router.push('shopdetail')
    }
  }
}
</script>

<style lang="less">
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
  font-size: 12px;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.demo-table-expand .el-form-item span{
  font-size: 12px;
}
</style>
